﻿@page "/signaturepad"

<h3>SignaturePad 签名</h3>

<SignaturePad OnResult="((e) =>  Result=e)" />

<pre>
    <code style="color:gray">
        &lt;SignaturePad OnResult="((e) =>  Result=e)" BtnCssClass="btn btn-outline-success" /&gt;
    </code>
</pre>
<SignaturePad OnResult="((e) =>  Result=e)" BtnCssClass="btn btn-outline-success" />

<pre>
<code style="color:gray">
        &lt;SignaturePad OnResult="((e) =>  Result=e)"
                        SignAboveLabel="Sign above"
                        UndoBtnTitle="Undo"
                        SaveBase64BtnTitle="OK"
                        ChangeColorBtnTitle="Change color"
                        ClearBtnTitle="Clear" /&gt;
    </code>
</pre>
<SignaturePad OnResult="((e) =>  Result=e)"
              SignAboveLabel="Sign above"
              UndoBtnTitle="Undo"
              SaveBase64BtnTitle="OK"
              ChangeColorBtnTitle="Change color"
              ClearBtnTitle="Clear" />

<p>签名Base64</p>
<textarea type="text" class="form-control" style="min-width: 100px;max-width: 80%;" rows="6"
          @bind="Result"
          placeholder="Base64" />

<p style="color:red;margin-top:50px">
    Tips: 复杂签名会导致传输数据量大ssr会出现断流显示reload错误,启用以下配置解决这个问题.
</p>

<pre>
<code style="color:gray">
        builder.Services.AddServerSideBlazor(a =>
        {
            //异步调用JavaScript函数的最大等待时间
            a.JSInteropDefaultCallTimeout = TimeSpan.FromMinutes(2);
        }).AddHubOptions(o =>
        {
            //单个传入集线器消息的最大大小。默认 32 KB
            o.MaximumReceiveMessageSize = null;
            //可为客户端上载流缓冲的最大项数。 如果达到此限制，则会阻止处理调用，直到服务器处理流项。
            o.StreamBufferCapacity = 20;
        });
    </code>
</pre>

<AttributeTable Items="@GetAttributes()" />

@code{

    /// <summary>
    /// 签名Base64
    /// </summary>
    public string? Result { get; set; }


    /// <summary>
    /// 获得属性方法
    /// </summary>
    /// <returns></returns>
    private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
        new AttributeItem("OnResult","签名结果回调方法",  "","EventCallback<string>") ,
        new AttributeItem("OnAlert","手写签名警告信息回调",  "","EventCallback<string>") ,
        new AttributeItem("OnError","错误回调方法",  "","Func<string, Task>") ,

        new AttributeItem("BtnCssClass","按钮CSS式样",  "btn btn-light") ,
        new AttributeItem("SignAboveLabel","在框内签名标签文本",  "在框内签名") ,
        new AttributeItem("ClearBtnTitle","清除按钮文本",  "清除") ,
        new AttributeItem("SignatureAlertText","请先签名提示文本",  "请先签名") ,
        new AttributeItem("ChangeColorBtnTitle","换颜色按钮文本",  "换颜色") ,
        new AttributeItem("UndoBtnTitle","撤消按钮文本",  "撤消") ,
        new AttributeItem("SaveBase64BtnTitle","保存为base64按钮文本",  "确定") ,
        new AttributeItem("SavePNGBtnTitle","保存为PNG按钮文本",  "PNG") ,
        new AttributeItem("SaveJPGBtnTitle","保存为JPG按钮文本",  "JPG") ,
        new AttributeItem("SaveSVGBtnTitle","保存为SVG按钮文本",  "SVG") ,

        new AttributeItem("EnableChangeColorBtn","启用换颜色按钮",  "true","bool") ,
        new AttributeItem("EnableAlertJS","启用JS错误弹窗",  "true","bool") ,
        new AttributeItem("EnableSaveBase64Btn","启用保存为base64按钮",  "true","bool") ,
        new AttributeItem("EnableSavePNGBtn","启用保存为PNG按钮文本",  "false","bool") ,
        new AttributeItem("EnableSaveJPGBtn","启用保存为JPG按钮文本",  "false","bool") ,
        new AttributeItem("EnableSaveSVGBtn","启用保存为SVG按钮文本",  "false","bool") ,
                                };
}
